/**
 * 作用：指示 webpack 干那些活（当运行webpack指令时，会加载里面的配置）
 * 
 * 因为所有的构建工具，都是基于nodejs平台运行的，所以模块化默认采用commonjs。
 **/

//  resole 是用来拼接绝对路径的方法
const {
    resolve
} = require("path")

// 要先导入
const HtmlWebpackPlugin = require("html-webpack-plugin");

//  webpack 配置
module.exports = {
    // 入口起点
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出文件名
        filename: "js/main.js",
        // 输出路径
        // __dirname:表示当前文件（webpack.config.js）的目录绝对路径，第二个参数为根目录下的文件夹。
        path: resolve(__dirname, "build")
    },
    // loader的配置
    module: {
        rules: [
            // 详细loader配置

            // 配置css
            {
                test: /\.css$/,
                use: [ // use数组中loader执行顺序从右到左，从下到上 依次进行。
                    // 创建style标签，将js中的样式资源插入进入，添加到head中使之生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串。
                    'css-loader'
                ]
            }, {
                test: /\.less$/,
                use: [ // use数组中loader执行顺序从右到左，从下到上 依次进行。
                    // 创建style标签，将js中的样式资源插入进入，添加到head中使之生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串。
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader'
                ]
            }, {
                test: /\.(png|svg|jpg|gif|ico)$/,
                // 使用一个loader
                // 下载 url-loader 和 file-loader
                // 问题：默认处理不了html中的img图片
                loader: "url-loader",
                options: {
                    // 图片小于8kb，就会被base64处理。
                    // 优点：减少请求数量
                    // 缺点：图片体积会更大
                    limit: 8 * 1024,
                    // 给图片进行重命名 
                    // hash:10----取图片的hash值的前10位
                    // ext---取文件原来的扩展名
                    // name: 'assets/[name].[ext]',
                    name: '[hash:10].[ext]',

                    // 下面问题的是新版本没有问题的问题：
                    // 问题：因为url-loader默认使用es6模块解析，而html-loader引入图片时commonjs
                    // 所以在url-loader在解析时会出现问题：[object Module]
                    // 解决：关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,

                    // 输出到指定目录
                    outputPath: "imgs"
                }
            }, {
                test: /\.html$/,
                // 处理html文件中的img标签图片（负责引入img，从而能被url-loader进行处理）
                loader: 'html-loader'
            }, {
                // 排除 css|js|html 的资源
                exclude: /\.(css|js|html|less|png|svg|jpg|gif|ico)$/,
                loader: 'file-loader',
                options: {
                    // 给图片进行重命名
                    // hash:10----取图片的hash值的前10位
                    // ext---取文件原来的扩展名
                    // name: 'assets/[name].[ext]',
                    name: '[hash:10].[ext]',

                    // 输出到指定目录
                    outputPath: "media"
                }
            }
        ]
    },
    // plugins的配置
    plugins: [
        // 详细plugins配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
        // new HtmlWebpackPlugin()

        // 需求：需要有结构的html文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
            template: './src/index.html',
            // alwaysWriteToDisk: false,
            // filename: 'index.html',
        })

    ],
    // 模式
    mode: "development", // 开发模式
    // mode: "production" // 生产模式


    // 启动devServer指令位：npx webpack-dev-server
    devServer: {
        // 项目构建后的路径
        contentBase: resolve(__dirname, "build"),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true
    }
}